<!--
@Author: 魏巍 <jswei>
@Date:   2018-08-13T04:03:17+08:00
@Email:  524314430@qq.com
@Filename: tabbar.vue
@Last modified by:   jswei
@Last modified time: 2018-08-28T04:32:42+08:00
@Copyright: free
-->

<template>
  <div class="tabbar">
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item :id="item.id" v-for="(item,index) in menu" :key="index">
        <i class="iconfont" :class="item.icon" slot="icon"></i>
        <div class="title">
          {{item.title}}
        </div>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import menu from '@/api/menu'
export default {
  data() {
    return {
      selected:null,
      menu:menu
    }
  },
  watch: {
    selected(newValue) {
      newValue = this.menu.filter(item =>{ return item.id === newValue})[0];
      console.log(newValue)
    }
  },
}
</script>

<style lang="scss" scoped>
  .tabbar{
    .mint-tabbar{
      height: 4rem;
      .mint-tab-item{
        .mint-tab-item-icon{
          .iconfont{
            font-size: 1.6rem;
          }
        }
        .mint-tab-item-label{
          .title{
            font-size: 1rem;
          }
        }
      }
    }
  }
</style>
